import {
  setWidgetConfigValue,
  setOptionsTitle,
  setOptionsTooltip,
  setOptionsLegend,
} from "../comm.js";
import * as echarts from "echarts";
export const widgetGradientBarchart = {
  title: {
    text: "",
    x: "center",
    y: "4%",
    textStyle: {
      color: "#fff",
      fontSize: "22",
    },
    subtextStyle: {
      color: "#90979c",
      fontSize: "16",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "15%",
    right: "3%",
    left: "5%",
    bottom: "12%",
  },
  legend: {
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.12)",
      },
    },
    axisLabel: {
      margin: 10,
      color: "#e2e9ff",
      textStyle: {
        fontSize: 14,
      },
    },
  },
  yAxis: {
    name: "",
    axisLabel: {
      formatter: "{value}",
      color: "#e2e9ff",
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(255,255,255,0)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255,255,255,0.12)",
      },
    },
  },
  series: [
    {
      type: "bar",
      data: [5000, 2600, 1300, 1300, 1250, 1500],
      barWidth: "20px",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,244,255,1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0,77,167,1)", // 100% 处的颜色
              },
            ],
            false
          ),
          shadowColor: "rgba(0,160,221,1)",
          //模糊细数
          shadowBlur: 4,
        },
      },
      label: {
        normal: {
          show: true,
          position: ["-10", "-30"],
          distance: 1,
          formatter: "{a|{c}}",
          rich: {
            a: {
              fontSize: 15,
              color: "#fff",
              align: "center",
            },
          },
        },
      },
    },
  ],
};

export const widgetGradientBarchartAnalysisfun = {
  optionsSetup: {},
  options: {},
  optionsStyle: {},
  val: [],
  setOptions(options, optionsSetup, cotrl, val) {
    this.val = [];
    if (val != null && typeof val == "string" && val != "") {
      this.val = JSON.parse(val);
    } else if (typeof val == "object") {
      this.val = val;
    }
    this.optionsStyle.width = cotrl.w;
    this.optionsStyle.height = cotrl.h;
    this.optionsSetup = optionsSetup;
    this.options = options;
    this.options.title = setOptionsTitle(this.optionsSetup);
    this.options.tooltip = setOptionsTooltip(this.optionsSetup);
    this.options.legend = setOptionsLegend(this.optionsSetup);
    this.setOptionsX();
    this.setOptionsY();
    this.setOptionsTop();
    this.setOptionsColor();
    this.staticDataFn();
    return this.options;
  },
  // 静态数据
  staticDataFn() {
    let val = this.val;
    const optionsSetup = this.optionsSetup;
    const series = this.options.series;
    let axis = [];
    let data = [];
    for (const i in val) {
      axis[i] = val[i].axis;
      data[i] = val[i].data;
    }
    // 根据图表的宽度 x轴的字体大小、长度来估算X轴的label能展示多少个字
    const rowsNum =
      optionsSetup.textRowsNum !== ""
        ? optionsSetup.textRowsNum
        : parseInt(
            this.optionsStyle.width / axis.length / optionsSetup.textFontSizeX
          );
    const axisLabel = {
      show: true,
      interval: optionsSetup.textIntervalX,
      // 文字角度
      rotate: optionsSetup.textAngleX,
      textStyle: {
        // 坐标文字颜色
        color: optionsSetup.textColorX,
        fontSize: optionsSetup.textFontSizeX,
        fontWeight: optionsSetup.textFontWeightX,
        fontStyle: optionsSetup.textFontStyleX,
        fontFamily: optionsSetup.textFontFamilyX,
      },
      // 自动换行
      formatter: function(value, index) {
        const strs = value.split("");
        let str = "";
        for (let i = 0, s; (s = strs[i++]); ) {
          str += s;
          if (!(i % rowsNum)) str += "\n";
        }
        return str;
      },
    };
    // x轴
    if (optionsSetup.verticalShow) {
      this.options.xAxis.data = [];
      this.options.yAxis.data = axis;
      this.options.xAxis.type = "value";
      this.options.yAxis.type = "category";
    } else {
      this.options.xAxis.data = axis;
      this.options.yAxis.data = [];
      this.options.xAxis.type = "category";
      this.options.yAxis.type = "value";
      if (optionsSetup.textRowsBreakAuto) {
        this.options.xAxis.axisLabel = axisLabel;
      }
    }
    if (series[0].type == "bar") {
      series[0].data = data;
    }
  },
  // X轴设置
  setOptionsX() {
    const optionsSetup = this.optionsSetup;
    const xAxis = {
      type: "category",
      // 坐标轴是否显示
      show: optionsSetup.isShowX,
      position: optionsSetup.positionX,
      offset: optionsSetup.offsetX,
      // 坐标轴名称
      name: optionsSetup.nameX,
      nameLocation: optionsSetup.nameLocationX,
      nameTextStyle: {
        color: optionsSetup.nameColorX,
        fontSize: optionsSetup.nameFontSizeX,
        fontWeight: optionsSetup.nameFontWeightX,
        fontStyle: optionsSetup.nameFontStyleX,
        fontFamily: optionsSetup.nameFontFamilyX,
      },
      // 轴反转
      inverse: optionsSetup.reversalX,
      axisLabel: {
        show: optionsSetup.isShowAxisLabelX,
        interval: optionsSetup.textIntervalX,
        // 文字角度
        rotate: optionsSetup.textAngleX,
        textStyle: {
          // 坐标文字颜色
          color: optionsSetup.textColorX,
          fontSize: optionsSetup.textFontSizeX,
          fontWeight: optionsSetup.textFontWeightX,
          fontStyle: optionsSetup.textFontStyleX,
          fontFamily: optionsSetup.textFontFamilyX,
        },
      },
      axisLine: {
        show: optionsSetup.isShowAxisLineX,
        lineStyle: {
          color: optionsSetup.lineColorX,
          width: optionsSetup.lineWidthX,
        },
      },
      axisTick: {
        show: optionsSetup.isShowAxisLineX,
        lineStyle: {
          color: optionsSetup.lineColorX,
          width: optionsSetup.lineWidthX,
        },
      },
      splitLine: {
        show: optionsSetup.isShowSplitLineX,
        lineStyle: {
          color: optionsSetup.splitLineColorX,
          width: optionsSetup.splitLineWidthX,
        },
      },
    };
    this.options.xAxis = xAxis;
  },
  // Y轴设置
  setOptionsY() {
    const optionsSetup = this.optionsSetup;
    const yAxis = {
      max: optionsSetup.maxY !== "" ? optionsSetup.maxY : null,
      type: "value",
      scale: optionsSetup.scale,
      // 均分
      splitNumber: optionsSetup.splitNumberY,
      // 坐标轴是否显示
      show: optionsSetup.isShowY,
      position: optionsSetup.positionY,
      offset: optionsSetup.offsetY,
      // 坐标轴名称
      name: optionsSetup.textNameY,
      nameLocation: optionsSetup.nameLocationY,
      nameTextStyle: {
        color: optionsSetup.nameColorY,
        fontSize: optionsSetup.nameFontSizeY,
        fontWeight: optionsSetup.nameFontWeightY,
        fontStyle: optionsSetup.nameFontStyleY,
        fontFamily: optionsSetup.nameFontFamilyY,
      },
      // 轴反转
      inverse: optionsSetup.reversalY,
      axisLabel: {
        show: optionsSetup.isShowAxisLabelY,
        // 文字角度
        rotate: optionsSetup.textAngleY,
        //interval: optionsSetup.textIntervalY,
        textStyle: {
          // 坐标文字颜色
          color: optionsSetup.textColorY,
          fontSize: optionsSetup.textFontSizeY,
          fontWeight: optionsSetup.textFontWeightY,
          fontStyle: optionsSetup.textFontStyleY,
          fontFamily: optionsSetup.textFontFamilyY,
        },
      },
      axisLine: {
        show: optionsSetup.isShowAxisLineY,
        lineStyle: {
          color: optionsSetup.lineColorY,
          width: optionsSetup.lineWidthY,
        },
      },
      axisTick: {
        show: optionsSetup.isShowAxisLineY,
        lineStyle: {
          color: optionsSetup.lineColorY,
          width: optionsSetup.lineWidthY,
        },
      },
      splitLine: {
        show: optionsSetup.isShowSplitLineY,
        lineStyle: {
          color: optionsSetup.splitLineColorY,
          width: optionsSetup.splitLineWidthY,
        },
      },
    };
    if (yAxis.max == null) {
      delete yAxis.max;
    }
    this.options.yAxis = yAxis;
  },
  // 数值设定 or 柱体设置
  setOptionsTop() {
    const optionsSetup = this.optionsSetup;
    const series = this.options.series;
    if (series[0].type == "bar") {
      series[0].barGap = optionsSetup.barGap + "%";
      series[0].barMinHeight = optionsSetup.minHeight;
      series[0].label = {
        show: optionsSetup.isShow,
        position: optionsSetup.fontPosition,
        distance: optionsSetup.fontDistance,
        fontSize: optionsSetup.fontSize,
        color: optionsSetup.fontColor,
        fontWeight: optionsSetup.fontWeight,
        formatter: !!optionsSetup.percentSign ? "{c}%" : "{c}",
        fontStyle: optionsSetup.fontStyle,
        fontFamily: optionsSetup.fontFamily,
      };
      series[0].barWidth = optionsSetup.maxWidth;
      //柱体背景属性
      series[0].showBackground = optionsSetup.isShowBackground;
      series[0].backgroundStyle = {
        color: optionsSetup.backgroundStyleColor,
        borderColor: optionsSetup.backgroundStyleBorderColor,
        borderWidth: optionsSetup.backgroundStyleBorderWidth,
        borderType: optionsSetup.backgroundStyleBorderType,
        shadowBlur: optionsSetup.backgroundStyleShadowBlur,
        shadowColor: optionsSetup.backgroundStyleShadowColor,
        opacity: optionsSetup.backgroundStyleOpacity / 100,
      };
    }
  }, // 渐变色
  setOptionsColor() {
    const optionsSetup = this.optionsSetup;
    const itemStyle = this.options.series[0]["itemStyle"];
    let normal = {};
    if (optionsSetup.verticalShow) {
      normal = {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: optionsSetup.bar0color, // 0% 处的颜色
          },
          {
            offset: 1,
            color: optionsSetup.bar100color, // 100% 处的颜色
          },
        ]),
        barBorderRadius: optionsSetup.radius, //圆角
        shadowColor: optionsSetup.shadowColor, // 阴影颜色
        shadowBlur: optionsSetup.shadowBlur, //模糊系数
      };
    } else {
      normal = {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: optionsSetup.bar0color, // 0% 处的颜色
          },
          {
            offset: 1,
            color: optionsSetup.bar100color, // 100% 处的颜色
          },
        ]),
        barBorderRadius: optionsSetup.radius, //圆角
        shadowColor: optionsSetup.shadowColor, // 阴影颜色
        shadowBlur: optionsSetup.shadowBlur, //模糊系数
      };
    }
    itemStyle["normal"] = normal;
  },
};
